<!-- 快速发布 -->
<template>
	<view
		:style="'order:'+Order+';'+Css"
		class="block-quick-publish">
		<view class="box" v-if="$_loginOrNot()">
			<textarea
				:placeholder="Placeholder"
				placeholder-style="color: #C0C4CC;"
				v-model="postContent"
				:show-confirm-bar="false"></textarea>
			<view class="quote-post" v-if="postQuotePost">
				<text class="iconfont icon-yinyong"></text>
				<text>{{postQuotePost.title?postQuotePost.title:$_filterHtml(postQuotePost.content)}}</text>
			</view>
			<view class="map-info" v-if="editorConfig&&editorConfig.editor.features.location.status && mapName">
				<text class="iconfont icon-map-filling"></text>
				<text>{{mapName}}</text>
			</view>
			<view
				class="file-image"
				v-if="draftDetails && draftDetails.files.images.length">
				<template v-for="(item,index) in draftDetails.files.images">
					<view
						@click="$_To('public/image?url=' + item.imageBigUrl)"
						class="for">
						<view class="image">
							<image :src="item.imageBigUrl" mode="widthFix"></image>
						</view>
						<text class="iconfont icon-close" @click.stop="clickDeleteAttachment(item.fid)"></text>
					</view>
				</template>
			</view>
			<view class="file-audio" v-if="draftDetails && draftDetails.files.audios.length">
				<view
					class="for"
					v-for="(item,index) in draftDetails.files.audios">
					<public-audio
						Css="width:620rpx;"
						:Url="item.audioUrl"></public-audio>
					<text class="iconfont icon-close" @click.stop="clickDeleteAttachment(item.fid)"></text>
				</view>
			</view>
			<view class="file-video">
				<template v-if="draftDetails && draftDetails.files.videos.length">
					<view
						@click="$_To('public/video?url=' + item.videoUrl)"
						v-for="(item,index) in draftDetails.files.videos"
						class="for">
						<view class="text">
							<text class="iconfont icon-arrow-right-filling"></text>
						</view>
						<text class="iconfont icon-close" @click.stop="clickDeleteAttachment(item.fid)"></text>
					</view>
				</template>
			</view>
			<view class="tool" v-if="editorConfig">
				<view class="_left">
					<text
						@click="createDraft('image')"
						v-if="editorConfig.editor.toolbar.image.status && config.image"
						class="iconfont icon-tupian"></text>
					<!-- #ifndef H5 -->
					<text
						@click="clickAudio"
						v-if="editorConfig.editor.toolbar.audio.status && config.audio"
						class="iconfont icon-yuyin"
						:style="audioBox?'color: #409EFF;':''"></text>
					<!-- #endif -->
					<text
						@click="createDraft('video')"
						v-if="editorConfig.editor.toolbar.video.status && config.video"
						class="iconfont icon-zhibo"></text>
					<text
						@click="emojiBox = !emojiBox"
						v-if="editorConfig.editor.toolbar.sticker && config.emoji"
						class="iconfont icon-smile"
						:style="emojiBox?'color: #409EFF;':''"></text>
					<text
						@click="$_To('editor/editorAceTex?uniqueId='+UniqueId)"
						v-if="editorConfig.editor.toolbar.mention.status && config.aceTex"
						class="iconfont icon-shequ"></text>
					<text
						@click="$_To('editor/editorHashtag?uniqueId='+UniqueId)"
						v-if="editorConfig.editor.toolbar.hashtag.status && config.hashtag"
						class="iconfont icon-huati"></text>
					<text
						@click="clickMap"
						v-if="editorConfig.editor.features.location.status && config.location"
						class="iconfont icon-map"></text>
					<text
						v-if="config.quotePost"
						@click="$_To('editor/editorQuotePost?uniqueId='+UniqueId)"
						class="iconfont icon-yinyong1"></text>
				</view>
				<view class="_right" @click="clickPublishButton">
					<view>发布</view>
				</view>
			</view>
			<view
				v-if="audioBox"
				@click="createDraft('soundRecording')"
				class="operate-audio">
				<view>{{audioText == '单击录制音频'?'单击录制音频':audioText+'秒'}}</view>
			</view>
			<view class="operate-emoji" v-if="emojiBox">
				<template v-if="YrConfig&&YrConfig.allEmoji.length">
					<scroll-view scroll-y>
						<text
							@click="clickEmoji(item)"
							v-for="item in YrConfig.allEmoji">
							{{item}}
						</text>
					</scroll-view>
				</template>
				<template v-else>
					<public-loading></public-loading>
				</template>
			</view>
		</view>
		<template v-else>
			<view class="box" @click="$_notLoggedInPrompt()">
				<textarea
					placeholder="未登录 点我登录"
					placeholder-style="color: #C0C4CC;display: flex;align-items: center;justify-content: center;"
					disabled="false"></textarea>
				<view class="tool">
					<view class="_left">
						<text class="iconfont icon-tupian"></text>
						<text class="iconfont icon-yuyin"></text>
						<text class="iconfont icon-zhibo"></text>
						<text class="iconfont icon-smile"></text>
						<text class="iconfont icon-shequ"></text>
						<text class="iconfont icon-huati"></text>
						<text class="iconfont icon-map"></text>
						<text class="iconfont icon-yinyong1"></text>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name:"block-quick-publish",
		props:{
			YrConfig:{
				type:Object,
				default:null
			},
			config:{
				type:Object,
				default:null
			},
			Order:{
				type:Number,
				default:""
			},
			Css:{
				type:String,
				default:""
			},
			Placeholder:{
				type:String,
				default:""
			},
			Gid:{
				type:String,
				default:""
			},
			Hid:{
				type:String,
				default:""
			},
			UniqueId:{
				type:String,
				default:""
			},
		},
		data() {
			return {
				postContent:"",//正文内容
				postQuotePid:"",//引用帖子的pid
				postQuotePost:null,//引用帖子的详情
				mapName:"",//地图pio
				draftDetails:null,//草稿详情
				editorConfig:null,//编辑器配置
				audioBox:false,//音频操作框
				emojiBox:false,//表情操作框
				audioText:"单击录制音频",//音频录制按钮
				soundRecordingState:false,//音频录制状态
			};
		},
		mounted(){
			uni.$on('aiteUser'+this.UniqueId,(data) => {
				this.postContent += data.msg;
			})
			uni.$on('hashtag'+this.UniqueId,(data) => {
				if(this.editorConfig.editor.toolbar.hashtag.showMode == 1){
					this.postContent += ' #'+data.msg+' ';
				}else{
					this.postContent += ' #'+data.msg+'# ';
				}
			})
			uni.$on('quotePost'+this.UniqueId,(data) => {
				this.postQuotePid = data.msg;
				this.getPost()
			})
			this.getEditor();
		},
		methods:{
			// 请求，编辑器配置
			getEditor(){
				this.$_Request(
					"GET","/api/v2/editor/post/config",{},
					(res) => {
						this.editorConfig = res.data.data;
					}
				)
			},
			// 创建草稿
			createDraft(type){
				if(this.draftId){
					if(type == 'image'){
						// 点击，图片按钮
						this.clickFileImage();
					}
					if(type == 'video'){
						// 点击，视频按钮
						this.clickFileVideo();
					}
					if(type == 'soundRecording'){
						// 点击，录音按钮
						this.soundRecording();
					}
					if(type == 'publishing'){
						uni.showLoading();
						// 直接发布
						this.updateDraft('publishing')
					}
				}else{
					uni.showLoading();
					this.$_Request(
						"POST","/api/v2/editor/post/create",
						{
							"createType":2
						},
						(res) => {
							uni.hideLoading();
							if(res.data.code == 0){
								this.draftId = res.data.data.detail.id;
								if(type == 'image'){
									// 点击，图片按钮
									this.clickFileImage();
								}
								if(type == 'video'){
									// 点击，视频按钮
									this.clickFileVideo();
								}
								if(type == 'soundRecording'){
									// 点击，录音按钮
									this.soundRecording();
								}
								if(type == 'publishing'){
									// 直接发布
									this.updateDraft('publishing')
								}
							}else{
								uni.showToast({
									title:res.data.message,
									icon:"none",
									duration:1000
								});
							}
						}
					)
				}
			},
			// 点击，图片按钮
			clickFileImage(){
				let number = this.editorConfig.editor.toolbar.image.uploadNumber;
				uni.chooseImage({
					count:parseInt(number) ? parseInt(number) : 1,
					success: (res) => {
						this.UploadImage(res.tempFiles)
					}
				})
			},
			// 选择位置按钮
			clickMap(){
				this.textareaFocus = false;
				uni.chooseLocation({
					success: (res) => {
						this.mapLatitude = res.latitude;
						this.mapLongitude = res.longitude;
						this.mapName = res.name;
						this.mapAddress = res.address;
					}
				});
			},
			// 点击，视频按钮
			clickFileVideo(){
				uni.chooseVideo({
					maxDuration:parseInt(this.editorConfig.editor.toolbar.video.maxTime),
					success: (res) => {
						this.UploadVideo(res.tempFilePath)
					}
				})
			},
			// 点击，表情选中
			clickEmoji(item){
				this.postContent += item;
			},
			// 上传视频
			UploadVideo(video){
				let _this = this;
				uni.showLoading();
				uni.uploadFile({
					url: _this.$_Url() + "/api/v2/common/upload-file",
					filePath: video,
					name: "file",
					header: _this.$_FresnsHeader(),
					formData:{
						"usageType":1,
						"tableName":"post_logs",
						"tableColumn":"id",
						"type":"video",
						"tableKey":"",
						"uploadMode":"file",
						"tableId":_this.draftId
					},
					success(res) {
						uni.hideLoading();
						if(JSON.parse(res.data).code == 0){
							_this.audioText = "单击录制音频";
							_this.soundRecordingState = false;
							_this.getObtainDraftDetails();
							_this.audioText = "单击录制音频";
							_this.audioBox = false;
							uni.hideLoading();
						}else{
							uni.showToast({
								title: JSON.parse(res.data).message,
								icon: "none",
								duration: 1000
							});
						}
					}
				})
			},
			// 上传图片
			UploadImage(params){
				uni.showLoading({ title: "上传中" });
				return new Promise((presolve, preject) => {
					let uploads = [];
					(params).forEach((item, i) => {
						uploads[i] = new Promise((resolve) => {
							uni.uploadFile({
								url: this.$_Url() + "/api/v2/common/upload-file",
								filePath: item.path,
								name: "file",
								header: this.$_FresnsHeader(),
								formData:{
									"usageType":1,
									"tableName":"post_logs",
									"tableColumn":"id",
									"type":"image",
									"uploadMode":"file",
									"tableId":this.draftId
								},
								success(res) {
									if(JSON.parse(res.data).code == 0){
										resolve()
									}else{
										uni.hideLoading();
										resolve()
									}
								},
								fail(err) {
									
								}
							})
						})
					})
					Promise.all(uploads).then(res => {
						//图片上传完成
						presolve(res)
						uni.hideLoading();
						this.getObtainDraftDetails();
					}).catch(err => {
						preject(err)
						uni.showToast({
							title: '上传失败请重试',
							icon: 'none'
						})
					})
				})
			},
			// 获取草稿详情
			getObtainDraftDetails(){
				this.$_Request(
					"GET","/api/v2/editor/post/" + this.draftId,{},
					(res) =>{
						this.draftDetails = res.data.data.detail;
						if(res.data.data.detail.mapJson){
							this.mapLatitude = res.data.data.detail.mapJson.latitude;
							this.mapLongitude = res.data.data.detail.mapJson.longitude;
							this.mapName = res.data.data.detail.mapJson.poi;
							this.mapAddress = res.data.data.detail.mapJson.address;
						}
						this.postQuotePid = res.data.data.detail.quotedPid;
						if(this.postQuotePid){
							this.getPost()
						}
					}
				)
			},
			// 请求帖子详情，主要用于拿到引用帖子的信息
			getPost(){
				this.$_Request(
					"GET","/api/v2/post/"+this.postQuotePid+"/detail",
					{
						"whitelistKeys":"pid,title,content"
					},
					(res) => {
						this.postQuotePost = res.data.data.detail;
					}
				)
			},
			// 点击，删除附件
			clickDeleteAttachment(fid){
				uni.showModal({
					title: "提示",
					content: "是否要删除本附件？",
					success: (res) => {
						if(res.confirm) {
							uni.showLoading();
							this.updateDraft('deleteFile',fid)
						}
					}
				});
			},
			// 发布按钮
			clickPublishButton(){
				if(!this.postContent){
					uni.showToast({
						title: "内容不能为空",
						icon: "none",
						duration: 1000
					});
				}else{
					this.createDraft('publishing')
				}
			},
			// 更新草稿
			updateDraft(type,fid){
				if(!this.postContent){
					this.postContent = ""
				}
				if(!this.mapAddress){
					this.dataMap = {};
				}else{
					this.dataMap = {
						"mapId":4,
						"latitude": this.mapLatitude,
						"longitude": this.mapLongitude,
						"poi":this.mapName,
						"poiId":'',
						"address":this.mapAddress
					}
				}
				this.$_Request(
					"PUT","/api/v2/editor/post/" + this.draftId,
					{
						"postQuotePid":this.postQuotePid?this.postQuotePid:'', // 引用的帖子 PID
						"postGid":this.Gid, // 小组
						"postIsComment":"", // 是否可以评论帖子
						"postIsCommentPublic":"", // 是否公开评论，不公开则仅帖子作者可见
						"content":(this.postContent?this.postContent:'') + this.Hid + this.YrConfig.contentLittleTail, // 正文内容
						"isMarkdown":true, // 是否 Markdown
						"isAnonymous":"", // 是否匿名
						"map":this.dataMap,
						"deleteFile":fid?fid:"", // 删除附件
					},
					(res) => {
						uni.hideLoading();
						if(type == 'deleteFile'){
							if(res.data.code == 0){
								uni.hideLoading();
								// 重新获取草稿详情
								this.getObtainDraftDetails();
							}else{
								uni.showToast({
									title:res.data.message,
									icon:"none",
									duration:1000
								});
							}
						}
						if(type == 'deleteMap'){
							if(res.data.code == 0){
								uni.hideLoading();
								// 重新获取草稿详情
								this.getObtainDraftDetails();
							}else{
								uni.showToast({
									title:res.data.message,
									icon:"none",
									duration:1000
								});
							}
						}
						// 直接发布
						if(type == 'publishing'){
							if(res.data.code == 0){
								this.$_Request(
									"POST","/api/v2/editor/post/" + this.draftId,{},
									(res_) => {
										if(res_.data.code == 0){
											this.draftId = "";
											this.postContent = "";
											this.postQuotePid = "";
											this.postQuotePost = null;
											this.mapName = "";
											this.draftDetails = null;
											this.audioBox = false;
											this.audioText = "单击录制音频";
											this.soundRecordingState = false;
											this.$store.commit('mutationsStatelistStatus',true)
										}else{
											uni.showToast({
												title:res_.data.message,
												icon:"none",
												duration:1000
											});
										}
									}
								)
							}else{
								uni.showToast({
									title:res.data.message,
									icon:"none",
									duration:1000
								});
							}
						}
					}
				)
			},
			// 点击音频按钮
			clickAudio(){
				if(this.soundRecordingState){
					this.soundRecording()
				}else{
					this.audioBox = !this.audioBox;
				}
			},
			// 录音操作
			soundRecording(){
				this.soundRecordingState = !this.soundRecordingState;
				if(this.soundRecordingState){
					uni.getRecorderManager().start();
					this.audioText = 1;
					this.timer = setInterval(() => {
						this.audioText += 1;
						if(this.audioText == 59){
							this.audioText = "单击录制音频";
							this.soundRecordingState = false;
							clearInterval(this.timer)
							uni.getRecorderManager().stop();
							uni.getRecorderManager().onStop((res) => {
								this.UploadAudio(res.tempFilePath)
							});
						}
					}, 1000);
				}else{
					this.audioText = "单击录制音频";
					this.soundRecordingState = false;
					clearInterval(this.timer)
					uni.getRecorderManager().stop();
					uni.getRecorderManager().onStop((res) => {
						this.UploadAudio(res.tempFilePath)
					});
				}
			},
			// 上传音频
			UploadAudio(audio){
				let _this = this;
				uni.showLoading();
				uni.uploadFile({
					url: _this.$_Url() + "/api/v2/common/upload-file",
					filePath: audio,
					name: "file",
					header: _this.$_FresnsHeader(),
					formData:{
						"usageType":1,
						"tableName":"post_logs",
						"tableColumn":"id",
						"type":"audio",
						"tableKey":"",
						"uploadMode":"file",
						"tableId":_this.draftId
					},
					success(res) {
						console.log(res)
						uni.hideLoading();
						if(JSON.parse(res.data).code == 0){
							_this.audioText = "单击录制音频";
							_this.soundRecordingState = false;
							_this.getObtainDraftDetails();
							_this.audioText = "单击录制音频";
							_this.audioBox = true;
							uni.hideLoading();
						}else{
							uni.showToast({
								title: JSON.parse(res.data).message,
								icon: "none",
								duration: 1000
							});
						}
					}
				})
			},
		},
		// 销毁
		destroyed(){
			clearInterval(this.timer)
			uni.$off('aiteUser'+this.UniqueId)
			uni.$off('hashtag'+this.UniqueId)
			uni.$off('quotePost'+this.UniqueId)
		},
	}
</script>

<style lang="scss" scoped>
.block-quick-publish{
	.box{
		border: 1rpx solid $BianKuangSe;
		position: relative;
		textarea{
			width:calc(100% - 40rpx);
			height: 150rpx;
			font-size: 32rpx;
			padding: 15rpx 20rpx;
		}
		.quote-post{
			display: inline-flex;
			align-items: center;
			border: 1rpx solid $BianKuangSe;
			background: $BeiJingSe;
			margin: 0 10rpx 10rpx 10rpx;
			padding: 10rpx;
			border-radius: 100rpx;
			text{
				font-size: 22rpx;
				line-height: 22rpx;
				display: -webkit-box;
				/*!autoprefixer:off*/
				-webkit-box-orient: vertical;
				/*autoprefixer:on*/
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
			.icon-yinyong{
				padding-right: 5rpx;
				flex-shrink: 0;
				font-size: 28rpx;
				line-height: 28rpx;
			}
		}
		.map-info{
			display: inline-flex;
			align-items: center;
			border: 1rpx solid $BianKuangSe;
			background: $BeiJingSe;
			margin: 0 10rpx 10rpx 10rpx;
			padding: 10rpx;
			border-radius: 100rpx;
			text{
				font-size: 22rpx;
				line-height: 22rpx;
				display: -webkit-box;
				/*!autoprefixer:off*/
				-webkit-box-orient: vertical;
				/*autoprefixer:on*/
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
			.icon-map-filling{
				padding-right: 5rpx;
				flex-shrink: 0;
				font-size: 28rpx;
				line-height: 28rpx;
			}
		}
		.file-image{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.for{
				position: relative;
				width: 107rpx;
				height: 107rpx;
				margin: 0 0 10rpx 10rpx;
				overflow: hidden;
				box-shadow: 0 0 1rpx #333;
				background: $BeiJingSe;
				.image{
					width: 107rpx;
					height: 107rpx;
					overflow: hidden;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
				}
				.icon-close{
					position: absolute;
					top: 5rpx;
					right: 5rpx;
					z-index: 2;
					color: #FFF;
					text-shadow: 0 0 2rpx #000;
					font-size: 30rpx;
					line-height: 30rpx;
				}
			}
		}
		.file-video{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.for{
				position: relative;
				width: 107rpx;
				height: 107rpx;
				margin: 0 0 10rpx 10rpx;
				overflow: hidden;
				box-shadow: 0 0 1rpx #333;
				background: $BeiJingSe;
				.text{
					width: 107rpx;
					height: 107rpx;
					overflow: hidden;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #333;
					.iconfont{
						color: #FFF;
						font-size: 40rpx;
						line-height: 40rpx;
					}
				}
				.icon-close{
					position: absolute;
					top: 5rpx;
					right: 5rpx;
					z-index: 2;
					color: #FFF;
					text-shadow: 0 0 2rpx #000;
					font-size: 30rpx;
					line-height: 30rpx;
				}
			}
		}
		.file-audio{
			.for{
				margin: 0 0 10rpx 10rpx;
				width: 50%;
				display: flex;
				align-items: center;
				.icon-close{
					padding-left: 10rpx;
				}
			}
		}
		.tool{
			border-top: 1rpx solid $BianKuangSe;
			display: flex;
			align-items: center;
			height: 70rpx;
			._left{
				flex: 1;
				display: flex;
				align-items: center;
				padding-left: 10rpx;
				.iconfont{
					font-size: 40rpx;
					line-height: 40rpx;
					padding: 0 10rpx;
					color: $ZhanWeiSe;
				}
			}
			._right{
				flex-shrink: 0;
				display: flex;
				align-items: center;
				view{
					font-size: 22rpx;
					line-height: 22rpx;
					background: $LanSe;
					color: #FFF;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 20rpx;
					padding: 0 20rpx;
					border-radius: 5rpx;
				}
			}
		}
		.operate-audio{
			width: 100%;
			background: $BeiJingSe;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 25rpx 0;
			view{
				padding: 20rpx 25rpx;
				background: $HongSe;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FFF;
				border-radius: 100rpx;
				font-size: 28rpx;
				line-height: 28rpx;
			}
		}
		.operate-emoji{
			background: $BeiJingSe;
			padding: 15rpx;
			scroll-view{
				width: 100%;
				height: 300rpx;
				text{
					display: inline-block;
					font-size: 53rpx;
					line-height: 53rpx;
					padding: 10rpx;
				}
			}
		}
	}
}
</style>